<template>
  <div>
    <MyHeader :background="'blue'" :color="'write'" :title="'Tabbar案例'"></MyHeader>
    <!-- <MyTable></MyTable> -->
    <div class="main">
      <component :is="tabber"></component>
    </div>
    <MyTabBar :arr="tabList"
    @changeName="changeFn"
    ></MyTabBar>
  </div>
</template>

<script>
  import "bootstrap/dist/css/bootstrap.css"
  import "./assets/fonts/iconfont.css"

  import MyHeader from "./components/MyHeader.vue"
  import MyTable from "./components/MyTable.vue"
  import MyTabBar from "./components/MyTabBar.vue"

  import MyUserInfo from './views/MyUserInfo.vue'
  import MyGoodsList from './views/MyGoodsList.vue'
  import MyGoodsSearch from './views/MyGoodsSearch.vue'
export default {
  data(){
  return{
    tabber:'MyGoodsList',
    tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
  }
},
components:{
  MyHeader,
  MyTable,
  MyTabBar,
  MyGoodsList,
  MyUserInfo,
  MyGoodsSearch
},
methods:{
  changeFn(changeName){
this.tabber=changeName;
  }
}
}
</script>

<style scoped>
.main{
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>